<th:block layout:decorate="~{layout/accountLayout}" layout:fragment="content">
    <div class="card manage-account-form-wrapper js-manageAccountFormWrapper">
        <h3 th:utext="#{account.credit.title}">Customer Credit</h3>
        <hr />

        <p th:if="${#lists.isEmpty(accounts)}" th:utext="#{account.credit.noCredits}">
            You don't have any credits associated with this account.
        </p>

        <div th:unless="${#lists.isEmpty(accounts)}" class="col-sm-9 col-md-6">
            <ul id="account-credit" th:inline="text" class="clearfix">
                <li>
                    <span class="account-number" th:utext="#{account.credit.accountNumber}">Account Number</span>
                    <span class="balance" th:utext="#{account.credit.balance}">Balance</span>
                </li>
                <li class="credit" th:each="account : ${accounts}" th:object="${account}">
                    <div class="account-credit-info-row">
                        <span class="account-number" th:utext="*{accountNumber}"></span>
                        <span class="balance" blc:price="*{balance}"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</th:block>